<template>
    <div class='home'>
        <!-- 背景以及虚化层 -->
        <img class='image' :src='bgUrl'>
        <!-- 渐变层 -->
        <div class='head-bg'></div>
        <!-- 页面头部 -->
        <div class='home-top'>
            <div class='home-header'>
                <div class='logo1'></div>
                <div class='logo2'></div>
                <div class='home-title'> 自助终端打印</div>
                <div class='home-date'>
                    <div id='hour'></div>
                    <div id='year'></div>
                </div>
            </div>
            <div class="shuffling">
                <slider ref='slider' :pages='shufflingList' :sliderinit='sliderinit' @slide='slide' @tap='onTap' @init='onInit'>
                    <div slot='loading'>
                        <!-- <div class='loadingDot'>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </div> -->
                    </div>
                </slider>
                <div class='user-botton'>
                    <div class='user-info' v-show='userInfo.length > 0'>当前用户：{{ userInfo.name }} ({{ userInfoTime }}s)</div>
                    <!-- <div class='user-info' v-show='window.websocketUserInfo !== undefined'>当前用户：{{ window.websocketUserInfo.name }} ({{ userInfoTime }}s)</div> -->
                    <div class='botton-list'>
                        <Button class='botton-style' @click='getReport' type='primary'>成绩单打印</Button>
                    </div>
                    <!-- <div class='botton-list'>
                        <Button @click='getChartList' class='botton-muilt' type='primary'>常用表格</Button>
                        <Button @click='getCertify' class='botton-muilt right' type='primary'>在校证明</Button>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- 底部说明 -->
        <div class='home-bottom'>
            <div class='bottom-container'>
                <div class='use-info'>
                    <span style='line-height: 80px'>使用说明:</span>
                    <li style='list-style-type:decimal' v-for='item in useNote'>{{item}}</li>
                </div>
                <div class='qrcode'>
                    <img class='qrcode-notice' src='static/images/down-1.png' width='120px'>
                    <img class='qrcode-img' :src='downloadQRCode'>
                </div>
            </div>
        </div>
        <!-- 扫码登陆弹窗 -->
        <Modal v-model='loginModal' :styles="{top: '20%'}" :mask-closable='false' :closable='false' width='70%'>
            <div class='login-header' slot='header'>扫码确认用户信息</div>
            <div class='login-container'>
                <div class='login-qrcode'>
                    <qrcode-vue :value='LoginQRvalue' :size='200'></qrcode-vue>
                </div>
                <div class='login-center'>
                    <div class='login-center-title'><span>使用指南</span></div>
                </div>
                <div class='login-bottom'>
                    <div class='login-method'></div>
                    <div class="login-text">
                        <span>使用TFinfo扫描上方二维码</span>
                        <span>确认用户信息</span>
                    </div>
                </div>
            </div>
            <div class='login-footer' @click="cancelLogin" slot='footer'>关闭( {{ loginWaitTime }}s )</div>
        </Modal>
    </div>
</template>

<script>
import slider from 'vue-concise-slider/src/components/slider'
import QrcodeVue from 'qrcode.vue'
var loginTimer
export default {
    name: 'home',
    created() {
        try {
            this.downloadQRCode = window.config.qrcodeUrl.url
            this.useNote = window.config.useNote
            this.getTime()
            this.userInfoValidWatcher()
            this.loginQRcodeFetch()
            this.socket.sendMessage({
                interface: 'getAdInfo'
            })
            this.shufflingList = window.websocketData.result
            this.shufflingList.map(item => {
                let a = {
                    imgUrl: item.imgUrl
                }
                this.mockList.push(a)
            })
            // this.loginWathcer()
        } catch (error) {
            console.log(error)
        }
    },
    data() {
        return {
            shufflingList: [],
            sliderinit: {
                effect: 'coverflow',
                currentPage: 1,
                tracking: false,
                thresholdDistance: 100, // 滑动距离阈值判定
                thresholdTime: 300, // 滑动时间阈值判定
                deviation: 200, // 偏移值
                widthScalingRatio: 0.2, // 宽度缩放比例
                heightScalingRatio: 0.85, // 高度缩放比例
                infinite: 2, // 多级滚动时，需要添加前后遍历数
                slidesToScroll: 1, // 需要滚动页面的数量
                loop: true, // 无限循环
                autoplay: 5000 // 自动播放:时间[ms]
            },
            bgUrl: '',
            downloadQRCode: '',
            useNote: [],
            userInfo: {name: '张三'},
            userInfoTime: 30,
            loginModal: false,
            loginWaitTime: 60,
            // LoginQRvalue: '{"data":{},"href":"http://10.20.5.111:7005/#/mobile","name":"yeaser","type":"3"}',
            LoginQRvalue: '',
            // loginTimer: '',
            pageIndex: '',
            mockList: [
                {imgUrl: 'static/images/pic1.png'},
                {imgUrl: 'static/images/pic2.png'},
                {imgUrl: 'http://hddesktopwallpapers.in/wp-content/uploads/2017/03/hugh-jackman-wallpaper-4k-logan-680x425.jpg'},
                {imgUrl: 'http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-samsung-galaxy-note-5-awesome/wallpaper-samsung-galaxy-note-5-ultra-hd-dancer-2160-3840-490.jpg'},
                {imgUrl: 'http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-samsung-galaxy-note-5-awesome/wallpaper-samsung-galaxy-note-5-ultra-hd-2160-3840-5.jpg'}
            ],
            pageOfBotton: ''
        }
    },
    methods: {
        // 获取成绩单预览数据
        getReport() {
            if (this.$store.state.userInfo) {
                let reportRequestData = {
                    'interface': 'printTemplate',
                    // userId: window.websocketUserInfo.result.USER_ID,
                    'keyId': this.$store.state.userInfo.KEY_ID,
                    'userId': this.$store.state.userInfo.USER_ID,
                    // 'fileId': this.$store.state.userInfo.fileId, // 1为成绩单打印
                    'fileId': 1, // 1为成绩单打印
                    'clientId': this.cookie.get('clientId')
                }
                console.log(reportRequestData)
                this.socket.sendMessage(reportRequestData)
                let getReportTimer = setInterval(() => {
                    if (window.printTemplateList !== undefined) {
                        this.$store.commit('SET_fileTemplateName', '成绩单打印')
                        window.printTemplateList.fileId = 1
                        this.$store.commit('SET_filePreciewList', window.printTemplateList)
                        this.$store.commit('SET_pageRouter', '/preview')
                        this.$router.push({
                            path: this.$store.state.pageRouter
                        })
                        window.clearInterval(getReportTimer)
                    }
                }, 100)
            } else {
                this.userLoginData()
                this.loginWatcher().then(() => {
                    let reportRequestData = {
                        'interface': 'printTemplate',
                        // userId: window.websocketUserInfo.result.USER_ID,
                        'keyId': this.$store.state.userInfo.KEY_ID,
                        'userId': this.$store.state.userInfo.USER_ID,
                        // 'fileId': this.$store.state.userInfo.fileId, // 1为成绩单打印
                        'fileId': 1, // 1为成绩单打印
                        'clientId': this.cookie.get('clientId')
                    }
                    console.log(reportRequestData)
                    this.socket.sendMessage(reportRequestData)
                    let getReportTimer = setInterval(() => {
                        if (window.printTemplateList !== undefined) {
                            this.$store.commit('SET_fileTemplateName', '成绩单打印')
                            window.printTemplateList.fileId = 1
                            this.$store.commit('SET_filePreciewList', window.printTemplateList)
                            this.$store.commit('SET_pageRouter', '/preview')
                            this.$router.push({
                                path: this.$store.state.pageRouter
                            })
                            window.clearInterval(getReportTimer)
                        }
                    }, 100)
                })
            }
            this.loginTimeCounter()
        },
        loginWatcher() {
            this.userInfoValidWatcher()
            const Vm = this
            return new Promise((resolve, reject) => {
                let homeTime = setInterval(() => {
                    console.log('this function is start..')
                    console.log(window.websocketUserInfo.XM, window.websocketUserInfo.type)
                    if (window.websocketUserInfo.XM && window.websocketUserInfo.type === 1) {
                        // alert(this.$store.state.pageRouter)
                        window.clearInterval(homeTime)
                        Vm.$store.commit('SET_userInfo', window.websocketUserInfo)
                        window.websocketUserInfo.type = ''
                        console.log('userInfo in state', Vm.$store.state.userInfo)
                        resolve()
                    }
                }, 200)
            })
        },
        // 用户信息有效期计时器
        userInfoValidWatcher() {
            let userInfo
            window.clearInterval(userInfo)
            userInfo = setInterval(() => {
                if (this.userInfoTime > 1) {
                    this.userInfoTime -= 1
                    if (this.userInfoTime < 10) {
                        this.userInfoTime = '0' + this.userInfoTime
                    }
                } else {
                    // 清除用户数据
                    this.userInfo.name = ''
                    this.userInfoTime = 0
                    window.clearInterval(userInfo)
                    // 清除显示样式
                }
                if (!this.loginModal) {
                    window.clearInterval(userInfo)
                }
            }, 1000)
        },
        // 扫码登陆弹窗计时函数
        loginTimeCounter() {
            loginTimer = setInterval(() => {
                if (this.loginWaitTime > 1) {
                    this.loginWaitTime -= 1
                    if (this.loginWaitTime < 10) {
                        this.loginWaitTime = '0' + this.loginWaitTime
                    }
                } else {
                    // 清除用户数据
                    this.userInfo.name = ''
                    this.loginWaitTime = 0
                    if (this.loginWaitTime === 0) {
                        this.loginModal = false
                    }
                    window.clearInterval(loginTimer)
                    // 清除显示样式
                }
            }, 1000)
            console.log('set', loginTimer)
        },
        // 前往常用表格页面
        getChartList() {
            this.loginWatcher()
            this.userLoginData()
            this.loginTimeCounter()
            this.$store.commit('SET_pageRouter', '/chart')
            // console.log(this.pageOfBotton)
        },
        // 获取在校证明
        getCertify() {
            this.userLoginData()
            this.loginTimeCounter()
            this.$store.commit('SET_pageRouter', '/preview')
            let certify = {
                'interface': 'printTemplate',
                'fileId': 1,
                'userId': 4,
                'clientId': this.cookie.get('clientId')
            }
            this.socket.sendMessage(certify)
        },
        // 关闭扫码登陆弹窗
        cancelLogin() {
            window.clearInterval(this.loginTimer)
            this.loginModal = false
        },
        // 用户扫码登陆二维码
        userLoginData() {
            let clientInfo = this.$store.state.clientInfo
            let userLogin = {
                interface: 'getUserLogin',
                clientId: clientInfo.uuid,
                ip: clientInfo.ip
            }
            this.socket.sendMessage(userLogin)
            console.log('window.websockQRCode.result', window.websockQRCode.result)
            let qrcodeValue = JSON.stringify(window.websockQRCode.result)
            this.LoginQRvalue = qrcodeValue
            console.log('user', qrcodeValue)
            this.loginModal = true
        },
        // 获取扫码登陆 二维码值 用于初始化页面时生成
        loginQRcodeFetch() {
            let clientInfo = this.$store.state.clientInfo
            let userLogin = {
                interface: 'getUserLogin',
                clientId: clientInfo.uuid,
                ip: clientInfo.ip
            }
            this.socket.sendMessage(userLogin)
        },
        // goTableList() {
        //     this.$router.push({
        //         path: '/table'
        //     })
        // },
        // goPrivent() {
        //     this.$router.push({
        //         path: '/table'
        //     })
        // },
        // goScorePrint() {
        //     this.$router.push({
        //         path: '/table'
        //     })
        // }
        // 轮播图系列函数
        turnTo(num) {
            // 传递事件 vue 2.0 传递事件修改了，好的写法应该直接写在空vue类中
            this.$refs.slider.$emit('slideTo', num)
        },
        slideNext() {
            this.$refs.slider.$emit('slideNext')
            // slider.$emit('slideNext')
        },
        slidePre() {
            this.$refs.slider.$emit('slidePre')
            // slider.$emit('slidePre')
        },
        autoplayStart() {
            this.$refs.slider.$emit('autoplayStart')
            // slider.$emit('slidePre')
        },
        autoplayStop() {
            this.$refs.slider.$emit('autoplayStop')
            // slider.$emit('slidePre')
        },
        appendslider() {
            this.shufflingList.push({
                html: 'slidernew',
                style: {
                    background: '#333',
                    color: '#fff',
                    // width: '10%',
                    // 'margin-right': '3%'
                }
            })
        },
        loadingShow() {
            this.$refs.slider.$emit('loadingShow')
            // slider.$emit('slidePre')
        },
        loadingHide() {
            this.$refs.slider.$emit('loadingHide')
            // slider.$emit('slidePre')
        },
        // 监听事件发生了变化,需要指向一个子组件实例
        slide(data) {
            try {
                let index = data.currentPage
                this.bgUrl = this.mockList[index].imgUrl
                this.pageIndex = data.currentPage
                // console.log(this.bgUrl)
            } catch (error) {
                // console.log(error)
            }
        },
        onTap(data) {
            // console.log('ontop', data)
        },
        onInit(data) {
            console.log(data)
        },
        // 获取时间
        getTime() {
            setInterval(() => {
                var date = new Date()
                var year = date.getFullYear()
                var month = date.getMonth() + 1
                var day = date.getDate()
                var hour = date.getHours()
                var minutes = date.getMinutes()
                if (hour < 10) {
                    hour = '0' + hour
                }
                if (minutes < 10) {
                    minutes = '0' + minutes
                }
                var str = year + '年' + month + '月' + day + '日'
                // var strTemp =
                document.getElementById('hour').innerHTML = hour + ':' + minutes
                // console.log(str1)
                document.getElementById('year').innerHTML = str
            }, 1000)
        }
    },
    components: {
        slider,
        QrcodeVue,
        cjcNav: () => import('@/components/common/Nav.vue'),
    },
    computed: {
        // userInfo() {
        //     if (window.websocketUserInfo !== undefined) {
        //         console.log('from com', window.websocketUserInfo)
        //         return window.websocketUserInfo
        //     } else {
        //         return ''
        //     }
        // }
    },
    mounted() {
        let Vm = this
        setTimeout(() => {
            this.mockList.map((item, index) => {
                let a = {
                    // html: 'slide' + index,
                    style: {
                        'background': 'url(' + item.imgUrl + ')',
                        'width': '80%',
                        'border-radius': '15px'
                    }
                }
                Vm.shufflingList.push(a)
            })
        }, 2000)
    }
}
</script>

<style lang='less' scoped>
@logoSize: 70px;
.slider-item {
    border-radius: 10px;
}
.home {
    // height: 1920px;
    width: 100%;
    height: 100vh;
    .image {
        position: absolute;
        width: 100%;
        max-width: 1080px;
        height: 100vh;
        z-index: 0;
        -webkit-filter: blur(15px); /* Chrome, Opera */
            -moz-filter: blur(15px);
            -ms-filter: blur(15px);    
                filter: blur(15px);
    }
    .head-bg {
        height: 100vh;
        width: 100%;
        position: absolute;
        z-index: 0;
        background: url('../../static/images/bg.png') no-repeat;
        background-size: cover;
    }
    .home-top {
        // background: red;
        z-index: 100;
        height: 100vh;
        font-size: '微软雅黑';
        background-size: cover;
        .home-header {
            height: 150px;
            width: 92%;
            margin: 0 auto;
            flex-direction: column;
            // background: peru;
            margin-bottom: 25px;
            padding-top: 10px;
            .logo1 {
                display: inline-block;
                height: @logoSize;
                width: @logoSize;
                background: url('../../static/images/top-logo1.png');
                background-size: cover;
                position: relative;
                // top: 50%;
                transform: translateY(20%);
            }
            .logo2 {
                display: inline-block;
                height: @logoSize;
                width: @logoSize;
                background: url('../../static/images/top-logo2.png');
                background-size: cover;
                position: relative;
                // top: 50%;
                transform: translateY(20%);
            }
            .home-title {
                display: inline-block;
                position: relative;
                color: #fff;
                font-family: '微软雅黑';
                height: @logoSize;
                font-size: calc(~'@{logoSize} - 15px');
                font-weight: 550;
                line-height: 125px;
                margin-left: 5px;
            }
            .home-date {
                display: inline-block;
                position: absolute;
                right: 4%;
                color: #fff;
                #hour {
                    font-size: 65px;
                }
                #year {
                    font-size: 23px;
                    margin-top: -20px;
                }
            }
        }
        .shuffling {
            // position: relative;
            position: absolute;
            height:100%;
            width:1080px;
            top: -750px;
        }
        .user-botton {
            width: 100%;
            height: 100px;
            position: absolute;
            z-index: 999;
            bottom: -200px;
            .user-info {
                width: 81%;
                height: 100%;
                margin: 0 auto;
                text-align: center;
                color: #fff;
                font-size: 40px;
            }
            .botton-list {
                width: 81%;
                height: 100%;
                // background: violet;
                margin: 0 auto;
                .botton-style {
                    height: 100%;
                    width: 100%;
                    font-size: 40px;
                }
                .botton-muilt {
                    height: 100%;
                    width: 47%;
                    font-size: 40px;
                    text-align: center;
                    // display: inline-flex;
                }
                .right {
                    float: right;
                }
            }
        }
    }
    .home-bottom {
        position: absolute;
        bottom: 0;
        height: 22%;
        width: 100%;
        border-top: 1px solid #284485;
        color: #fff;
        // background: yellowgreen;
        .bottom-container {
            // position: relative;
            height: 100%;
            width: 81%;
            // display: flex;
            padding-top: 30px;
            flex-direction: column;
            margin: 0 auto;
            // background: yellow;
            font-size: 25px;
            .use-info {
                width: 75%;
                display: inline-block;
                // font-size: 26px;
            }
            .qrcode {
                display: inline-block;
                width: 25%;
                position: absolute;
                text-align: right;
                right: 10%;
                margin-top: 100px;
                .qrcode-notice {
                    position: absolute;
                    top: -35px;
                    right: 0px;
                    width: 120px;
                }
                .qrcode-img {
                    position: relative;
                    height: 120px;
                    width: 120px;
                }
            }
        }
    }
}
.login-header {
    text-align: center;
    font-size: 30px;
    line-height: 60px;
}
.login-footer {
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    color: #009aff;
}
.login-container {
    height: 600px;
    width: 100%;
}
.login-qrcode {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
.login-center {
    position: relative;
    width: 85%;
    height: 60px;
    font-size: 23px;
    color: #333;
    padding-top: 35px;
    margin: 0 auto;
    // background-size: cover;
    border-bottom: 1px solid #ddd;
    .login-center-title {
        width: 200px;
        height: 50px;
        background: #ddd;
        text-align: center;
        line-height: 50px;
        margin: 0 auto;
        border-radius: 25px 25px;
    }
}
.login-bottom {
    color: #ddd;
    width: 85%;
    margin: 0 auto;
    margin-top: 30px;
    .login-method {
        height: 300px;
        width: 65%;
        margin: 0 auto;
        margin-top: 55px;
        background: url('../../static/images/use1.png') no-repeat;
    }
    .login-text {
        font-size: 20px;
        width: 70%;
        margin: 0 auto;
        margin-top: -70px;
        span:nth-child(1) {
            float: left;
            margin-left: -30px;
        }
        span:nth-child(2) {
            float: right;
            margin-right: 25px;
        }
    }
}
</style>
